<template>
    <view class="card-view">
        <view class="address-head">
            <view class="head-left">银行卡</view>
            <view class="head-right"></view>
        </view>
        <view class="address-list">
            <view v-for="(item, index) in 4" :key="index" class="address-item">
                <view class="item-view">
                    <view class="item-name">中国工商银行</view>
                    <view class="item-adr">宋先生</view>
                    <view class="item-adr">6322222********332234</view>
                    <view class="item-button">
                        <view class="edit-button">
                            <image src="/static/pc/pcedit-icon.png" class="left-image"></image>
                            编辑
                        </view>
                        <view class="delete-button">
                            <image src="/static/pc/pcdelete-icon.png" class="left-image"></image>
                            删除
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {};
    },
    methods: {},
};
</script>

<style scoped lang="scss">
.card-view {
    width: 100%;
    background: white;
    padding: 48px 40px 36px 40px;
    min-height: 610px;

    .address-head {
        @extend .row-between;
        font-family: PingFangSC, PingFang SC;
        text-align: left;
        font-style: normal;

        .head-left {
            font-weight: 600;
            font-size: 20px;
            color: #2c1101;
            line-height: 28px;
        }

        .head-right {
            font-weight: 400;
            font-size: 14px;
            color: #ff2615;
            line-height: 20px;
        }
    }

    .address-list {
        width: 100%;
        @extend .row-between;
        flex-wrap: wrap;

        .address-item {
            width: calc(100% / 2 - 10px);
            margin-top: 20px;

            .item-view {
                width: 100%;
                // height: 126px;
                background: #ffffff;
                border-radius: 8px;
                border: 1px solid #e8ded6;
                backdrop-filter: blur(4px);
                padding: 13px 16px;

                .item-name {
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 600;
                    font-size: 16px;
                    color: #2c1101;
                    line-height: 28px;
                    text-align: left;
                    font-style: normal;
                }

                .item-adr {
                    font-weight: 400;
                    font-size: 14px;
                    color: #b8aca3;
                }

                .item-button {
                    margin-top: 25px;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    font-size: 14px;
                    color: #2c1101;
                    line-height: 20px;
                    font-style: normal;
                    @extend .row-end;

                    .edit-button {
                        margin-right: 30px;

                        .left-image {
                            width: 12px;
                            height: 12px;
                            margin-right: 2px;
                        }
                    }

                    .delete-button {
                        color: #ff2615;

                        .left-image {
                            width: 12px;
                            height: 12px;
                            margin-right: 2px;
                        }
                    }
                }
            }
        }
    }
}
</style>